<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2025-03-20 10:55:35
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-04-09 11:46:43
 * @FilePath: \leeui\lee_ui_test\src\views\lee\com.vue
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import {
  h,
  reactive,
  ref, //onMounted
} from "vue";
import { LElCom } from "@uf_lee/leeui";
import type { ComData } from "@uf_lee/leeui";
const data = reactive<ComData>({
  field: "Divider",
  component: "Divider",
  componentProps: {
    contentPosition: "left",
  },
});
const value = reactive(["自定义插槽123123", "事件", "1234"]);

const data2 = reactive<ComData>({
  field: "Badge",
  component: "Badge",
  slots: {
    default: () => {
      // console.log(value);
      return h("div", null, "自定义默认内容");
    },
    content: () => {
      // console.log(value);
      return h("div", null, "自定义显示内容");
    },
  },
});

function funButton(res: any): void {
  aaa.value = res.value;
}

const data3 = reactive<ComData>({
  field: "Button",
  component: "Button",
  componentProps: {
    type: "warning",
    color: "#626aef",
    onClick: funButton,
  },
  slots: {
    default: () => {
      // console.log(value);
      return h("div", null, "自定义按钮");
    },
  },
});

let aaa = ref("123");

const data4 = reactive<ComData>({
  field: "Input",
  component: "Input",
  componentProps: {},
  slots: {
    default: () => {
      // console.log(value);
      return h("div", null, "自定义按钮");
    },
    append: () => {
      // console.log(value);
      return h("div", null, "自定义按钮");
    },
  },
});
</script>

<template>
  <LElCom :data="data" v-model="value[0]"></LElCom>
  <LElCom :data="data2"></LElCom>
  <LElCom :data="data" v-model="value[0]"></LElCom>
  <LElCom :data="data4" v-model="value[2]"></LElCom>
  <LElCom :data="data" v-model="value[1]"></LElCom>
  <LElCom :data="data3" v-model="value[2]"></LElCom>
</template>
